<script setup>
import { ref } from 'vue';
import { createOrder, getMedicinesOrderDetail } from '@/apis/medicine';
import { getConsultPay } from '@/apis/consult';
  
	const query=defineProps({
		orderId:String
	})

//定义订单详情
 const orderDetail=ref({})
//获取药品订单详情
	const medicinesOrderDetail=async()=>{
		const res=await getMedicinesOrderDetail(query.orderId)
		console.log(res);
		orderDetail.value=res.data	
	}
	medicinesOrderDetail()
	
	
	const popupRef=ref(null)
	const orderId=ref('')
	//点击再次购买
	const onAgainBuy=async()=>{
		const res=await createOrder(orderDetail.value.id,orderDetail.value.addressInfo.id)
		console.log(res);
		// orderId.value=res.data.id
		popupRef.value.popupOpen()
	}
	
	//点击关闭按钮
	const onClose=async()=>{
		const res = await uni.showModal({
		    title: '关闭支付',
		    content: '取消支付将无法获得医生回复，医生接诊名额有限，是否确认关闭？',
		    cancelText: '仍要关闭',
		    cancelColor: '#848484',
		    confirmText: '继续支付',
		    confirmColor: '#16C2A3'
		  })
			//如果是取消按钮关闭弹出层
		  if (!res.confirm){
				popupRef.value.popupClose()
				}
	}
	//定义支付方式
	const paymentMethod=ref(1)
	//保存支付方式
	const onChoose=(val)=>{
		paymentMethod.value=val.paymentMethod
	}
	
	//立即支付
	const onConfirm=async()=>{
		const res= await getConsultPay({
			paymentMethod:paymentMethod.value,
			orderId:orderId.value,
			payCallback:'http://localhost:5173/#/subpkg_medicine/order_list/index'
			})
			window.location.href=res.data.payUrl
	}
</script>

<template>
  <scroll-page background-color="#f6f6f6">
    <view class="medicine-page">
      <view class="page-header">
        <view class="order-status">
          <text class="label">药品订单 {{orderDetail.payment}}元</text>
          <text class="status">{{orderDetail.statusValue}}</text>
        </view>
        <view class="order-shippment">
          <template v-if="orderDetail.status===12">
            <view class="region">
              <text class="iconfont icon-location"></text>
              {{orderDetail.addressInfo?.province}}{{orderDetail.addressInfo?.city}}{{orderDetail.addressInfo?.county}}
            </view>
            <view class="detail">{{orderDetail.addressInfo?.addressDetail}}</view>
            <view class="receiver">{{orderDetail.addressInfo?.receiver}} {{orderDetail.addressInfo?.mobile}}</view>
          </template>
          <template v-else>
            <navigator hover-class="none" url=" ">
              <view class="marker">{{orderDetail.expressInfo?.content}}</view>
              <view class="datetime">{{orderDetail.expressInfo?.time}}</view>
              <view class="arrow">
                <uni-icons size="18" color="#C3C3C5" type="forward" />
              </view>
            </navigator>
          </template>
        </view>
      </view>

      <view class="order-shop">
        优医药房
        <text class="alt">优医质保 假一赔十</text>
      </view>
      <!-- 药品列表 -->
      <view class="medicine-list">
        <view class="medicine-list-item" v-for="item in orderDetail.medicines">
          <image
            class="medicine-cover"
            :src="item.avatar"
            mode="aspectFill"
          />
          <view class="medicine-info">
            <text class="name">{{item.name}}</text>
            <text class="unit symbol">{{item.specs}}</text>
            <text class="price">¥{{item.amount}}</text>
          </view>
          <view class="quantity">x{{item.quantity}}</view>
          <view class="guide">用法用量：{{item.usageDosag}}</view>
        </view>
      </view>

      <!-- 订单信息 -->
      <view class="order-info">
        <uni-list :border="false">
          <uni-list-item title="药品金额" :right-text="`¥${orderDetail.payment}`" />
          <uni-list-item title="运费" :right-text="`¥${orderDetail.expressFee?.toFixed(2)}`" />
          <uni-list-item title="优惠券" show-arrow :right-text="`-¥${orderDetail.couponDeduction?.toFixed(2)}`" />
          <uni-list-item title="实付款" :right-text="`¥${orderDetail.actualPayment?.toFixed(2)}`" />
          <uni-list-item title="订单编号" :right-text="`${orderDetail.orderNo}`" />
          <uni-list-item title="创建时间" :right-text="`${orderDetail.createTime}`"/>
          <uni-list-item title="支付方式" :right-text="orderDetail.paymentMethod===1?'支付宝支付':'微信支付'" />
        </uni-list>
      </view>

      <view class="notice-bar">
        <uni-notice-bar text="请在 00:14:59 内完成支付，超时订单将取消" />
      </view>

      <!-- 底部 -->
      <view class="toolbar">
        <template v-if="orderDetail.status===1">
          <view class="total-amount">
            需付款: <text class="number">¥{orderDetail.payment}</text>
          </view>
          <view class="buttons">
            <button class="uni-button minor">取消问诊</button>
            <button class="uni-button">立即支付</button>
          </view>
        </template>
        <template v-else>
          <view class="buttons">
            <view class="delete-botton">
              <uni-icons size="24" color="#848484" type="trash" />
              <text>删除订单</text>
            </view>
            <button class="uni-button" @click="onAgainBuy">再次购买</button>
          </view>
        </template>
      </view>
    </view>
  </scroll-page>
	<custom-payment ref="popupRef" :orderId="orderId" :amount="orderDetail.actualPayment?.toFixed(2)" @close="onClose" @confirm="onConfirm"></custom-payment>
</template>

<style lang="scss">
  @import './index.scss';
</style>